<w-site-header></w-site-header>
<div w-i18n-ns="app.ledger" class="main-container movable">
    <div class="main-container-wrapper">
        <div class="import-content get-started-content">

            <div class="loader-error-wrapper" ng-if="$ctrl.error">
                <div class="sign-error-icon ledger-icons"></div>

                <h3 class="text-center basic-700" w-i18n="ledger.connectionError"></h3>

                <div class="margin-3 body-2 basic-500">
                    <div class="text-center basic-500">
                        <span w-i18n="ledger.connectionText"></span>
                    </div>
                    <div class="text-center basic-500">
                        <span w-i18n="ledger.referTo"></span>
                        <a href="https://support.ledgerwallet.com/hc/en-us/articles/115005165269-Fix-connection-issues"
                            w-i18n="ledger.article" target="_blank" rel="noopener noreferrer" class="submit-400"></a>
                    </div>
                </div>

                <div class="get-started-footer">
                    <div class="margin-3">
                        <w-button class="submit big long" on-click="$ctrl.retryGetUsers()">
                            <span w-i18n="ledgerForm.retry"></span>
                        </w-button>
                    </div>
                    <div class="or margin-2" w-i18n="or"></div>
                    <a class="submit-400 body-2 margin-05" ui-sref="import" w-i18n="ledgerForm.back"></a>
                </div>
            </div>

            <div class="import-wrapper margin-3" ng-if="$ctrl.isInit && !$ctrl.error">
                <div class="text-center">
                    <div class="headline-1 margin-4">
                        <span w-i18n="ledgerForm.importAccount"></span>
                    </div>
                </div>
                <div class="body-2 basic-900 margin-05" w-i18n="ledgerForm.choose"></div>
                <div class="footnote-1 basic-500" w-i18n="ledgerForm.avatarUnique"></div>
                <div class="avatars-scroll margin-2 margin-top-2">
                    <div class="step-arrows-wrp">
                        <div class="step-left" ng-click="$ctrl.stepLeft()" ng-class="{disabled: $ctrl.disabledLeft}"><div class="icon-left"></div></div>
                        <div class="step-right" ng-click="$ctrl.stepRight()" ng-class="{disabled: $ctrl.disabledRight}"><div class="icon-right"></div></div>
                    </div>
                <div class="avatars-list">
                    <div class="avatar-wrapper"
                         ng-if="!$ctrl.loading"
                         ng-class="{active: $ctrl.selectedUser === user, disabled: $ctrl.isUserDisable($index)}"
                         ng-repeat="user in $ctrl.visibleUsers track by user.id"
                         ng-click="$ctrl.selectUser(user)">
                         <w-avatar address="user.address"
                                  type="ledger"></w-avatar>
                    </div>
                </div>

                    <div class="loader-wrapper" ng-if="$ctrl.loading">
                        <w-loader></w-loader>
                    </div>
                </div>
                <div class="body-2 basic-900 margin-05" w-i18n="ledgerForm.address"></div>
                <div class="input-like margin-2">
                    <div ng-class="{empty: !$ctrl.selectedUser}" class="address basic-900 mobile-caption-2">
                        {{$ctrl.selectedUser.address}}
                    </div>
                </div>

                <div class="flex get-started-checkbox-save">
                    <w-checkbox-submit ng-model="$ctrl.selectDefault" id="select-default"></w-checkbox-submit>
                    <label for="select-default" class="footnote-1 basic-500">
                        <span w-i18n="ledgerForm.selectDefault"></span>
                    </label>
                </div>
                <div class="margin-2">
                    <div class="body-2 basic-900 margin-05" w-i18n="ledgerForm.name"></div>
                    <w-input w-autofocus
                             class="big no-validate no-icon"
                             type="text"
                             maxlength="20"
                             ng-model="$ctrl.name">
                    </w-input>
                </div>

                <div class="flex get-started-checkbox-save">
                    <w-checkbox-submit ng-model="$ctrl.saveUserData" id="save-user-data"></w-checkbox-submit>
                    <label for="save-user-data" class="footnote-1 basic-500">
                        <span w-i18n="ledgerForm.saveUserData"></span>
                    </label>
                </div>

                <w-button disabled="$ctrl.disabledLogin"
                          class="submit big long" on-click="$ctrl.login()">
                    <span w-i18n="ledgerForm.login"></span>
                </w-button>
                <w-get-started-link has-sign-in="::true" has-create="::true"></w-get-started-link>
            </div>
        </div>
    </div>
</div>
<w-footer></w-footer>
